<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增课题')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <link th:href="@{/css/fuzzy-query.css}" rel="stylesheet" type="text/css">
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-task-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">序号：</label>
                <div class="col-sm-8">
                    <input name="serialNumber" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">组织单位：</label>
                <div class="col-sm-8">
                    <input name="organizationUnit" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">项目级别：</label>
                <div class="col-sm-8">
                    <select id="projectLevel" name="projectLevel" class="form-control"></select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">项目名称：</label>
                <div class="col-sm-8">
                    <input name="projectName" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">课题负责人：</label>
                <div class="col-sm-8">
                    <input name="subjectFacilitator1" class="form-control" type="text">
                    <input type="hidden" name="subjectFacilitator">
                </div>
            </div>

            <div class="form-group" style="display: none" id="research">
                <label class="col-sm-3 control-label"></label>
                <div class="col-sm-8">
                    <div class="inner-panel col-sm-8" id="research-result" style="z-index: 3;">

                    </div>
                </div>

            </div>
            <div class="form-group" id="result-name">
                <label class="col-sm-3 control-label"></label>
                <div class="col-sm-8">
                    <ul class="select2-selection__rendered" id="result-ul">

                    </ul>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">立项时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="projectTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">申报课题名称：</label>
                <div class="col-sm-8">
                    <input name="subjectName" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">课题组成员：</label>
                <div class="col-sm-8">
                        <input name="membeGroup1" class="form-control" type="text">
                        <input type="hidden" name="membeGroup">
                </div>
            </div>
            <div class="form-group" style="display: none" id="tishi">
                <label class="col-sm-3 control-label"></label>
                <div class="col-sm-8">
                    <div class="inner-panel col-sm-8" id="result" style="z-index: 3;">

                    </div>
                </div>

            </div>
            <div class="form-group" id="name">
                <label class="col-sm-3 control-label"></label>
                <div class="col-sm-8">
                    <ul class="select2-selection__rendered" id="ul">

                    </ul>
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">结题时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="concludingTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group" hidden>
                <label class="col-sm-3 control-label">备案：</label>
                <div class="col-sm-8">
                    <input name="onRecords" class="form-control" type="text" value="0">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">上传文件：</label>
                <div class="col-sm-8">
                    <input type="hidden" name="filesUpload">
                    <div class="file-loading">
                        <input class="form-control file-upload" id="filesUpload" name="file" type="file">
                    </div>
                </div>
            </div>
            <div class="form-group" hidden>
                <label class="col-sm-3 control-label">审批状态：</label>
                <div class="col-sm-8">
                    <input name="status" class="form-control" type="text" value="0">
                </div>
            </div>

        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script th:src="@{/js/fuzzy-query.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "ruoyi/task"
        $("#form-task-add").validate({
            focusCleanup: true
        });

        score();
        function submitHandler() {
            var lengli=$("#ul li").length;
            var jieguo="";
            for (var i=0;i<lengli;i++){
                var title = $("#ul li:eq("+i+")").attr("title");//123
                if (i==lengli-1){
                    jieguo+=title;
                }else {
                    jieguo+=title+",";
                }

            }
          $("input[name='membeGroup']").val(jieguo);

            var lengli2=$("#result-ul li").length;
            var jieguo2="";
            for (var i=0;i<lengli2;i++){
                var title = $("#result-ul li:eq("+i+")").attr("title");//123
                if (i==lengli2-1){
                    jieguo2+=title;
                }else {
                    jieguo2+=title+",";
                }

            }
            $("input[name='subjectFacilitator']").val(jieguo2);
            if ($.validate.form()) {

                $.operate.save(prefix + "/add", $('#form-task-add').serialize());
            }
        }

        $("input[name='projectTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='concludingTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $(".file-upload").fileinput({
            uploadUrl: '/common/upload',
            maxFileCount: 1,
            autoReplace: true
        }).on('fileuploaded', function (event, data, previewId, index) {
            $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })

        function score() {
            var a = "sss"
            $.ajax({
                url: prefix + "/score",
                type: "get",
                dataType:"json",
                data: {},
                success: function(data){
                    if(data.length>0){

                        for(i in data){
                            $("#projectLevel").append("<option>"+data[i].lvName+"</option>")
                        }
                    }else{
                        $("#projectLevel").append("<option>暂无数据</option>")
                    }
                },
            })}
        $(".input-group-addon").click(function () {
            $.ajax({
                type:"post",
                url:"/ruoyi/personal/all",
                data:null,
                success:function (data) {

                },
                dataType: "json"
            })
        })

        $(function () {
            $("input[name='membeGroup1']").bind("input propertychange", function() {
                var currentValue =$("input[name='membeGroup1']").val();

                if(currentValue==null||currentValue==""){
                    $("#tishi").hide();
                }else{
                    // 将id是tishi的和id是ul的穿到函数中
                    fuzzyQuery("tishi","ul","result",currentValue,"membeGroup1","name");
                }

            })

            $("input[name='subjectFacilitator1']").bind("input propertychange", function() {
                var currentValue =$("input[name='subjectFacilitator1']").val();
                if(currentValue==null||currentValue==""){
                    $("#research").hide();
                }else{
                    // 将id是tishi的和id是ul的穿到函数中
                    fuzzyQuery("research","result-ul","research-result",currentValue,"subjectFacilitator1","result-name");
                }

            })
        })

        //判断在input中是否是按回车  课题负责人
        $("input[name='subjectFacilitator1']").bind('keypress', function (event) {
            if (event.keyCode == "13") {
                var currentValue =$("input[name='subjectFacilitator1']").val();
                if(currentValue==null||currentValue==""){
                }else {
                    stickyNote("research","result-ul",currentValue,"subjectFacilitator1","result-name");
                }
            }
        });

        //判断在input中是否是按回车  课题组成员
        $("input[name='membeGroup1']").bind('keypress', function (event) {
            if (event.keyCode == "13") {
                var currentValue =$("input[name='membeGroup1']").val();
                if(currentValue==null||currentValue==""){
                }else {
                    stickyNote("tishi","ul",currentValue,"membeGroup1","name");
                }
            }
        });

        //判断ul 下的li 是否==0 如果等于0隐藏
        function f() {
            var lengli=$("#ul li").length;
            var length = $("#result-ul li").length;
            if (lengli==0){
                $("#name").hide();
            }else {
                $("#name").show();
            }

            if (length==0){
                $("#result-name").hide();
            }else {
                $("#result-name").show();
            }
        }
        //访问页面加载一次
        f();
    </script>

</body>
</html>